<template>
  <div class="list" v-loading="loading">
    <div v-if="personList">
      <ul>
        <li
          v-for="(item, index) in personList"
          :key="index"
          @click="liClick(item)"
        >
          <el-row
            style="padding:10px"
            v-if="item.finalChatContext.msgtype == 'text'"
          >
            <span class="fl">
              <div class="ninebox">
                <ul v-if="item.roomInfo">
                  <li
                    v-for="(a, i) in item.roomInfo.avatar.split(',')"
                    :key="i"
                  >
                    <img :src="a" />
                  </li>
                </ul>
              </div>
            </span>
            <span class="fl" style="margin-left:8px;line-height:60px">
              <p>
                {{ item.finalChatContext.roomInfo.name }}
                <span class="fr gray">{{
                  parseTime(item.finalChatContext.fromInfo.updateTime)
                }}</span>
              </p>
              <p class="gray" v-if="item.finalChatContext.fromInfo">
                {{ item.finalChatContext.fromInfo.name }}:{{
                  item.finalChatContext.text.content
                }}
              </p>
            </span>
          </el-row>
          <!-- <el-row style="padding:10px" v-if="item.finalChatContext.msgtype=='file'">
                <el-col :span="3">&nbsp;</el-col>
                <el-col :span="21">
                   <p><span class="fr gray">{{parseTime(item.finalChatContext.msgtime)}}</span></p>
                   <p class="gray padt10" >{{item.finalChatContext.from}}:
                       <span v-if="item.finalChatContext.file.fileext=='mp4'">[视频]</span>
                       </p>     
                </el-col>
                </el-row>   -->
        </li>
      </ul>
    </div>
    <div v-else></div>
  </div>
</template>
<script>
import { parseTime } from '@/utils/common.js'
export default {
  props: {
    personList: {
      type: Array,
      defluat: () => []
    },
    loading: {
      type: Boolean,
      defluat: false
    }
  },

  data() {
    return {
      loadings: true
    }
  },
  methods: {
    liClick(e) {
      this.$emit('groupFn', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.ninebox {
  width: 54px;
  height: 52px;
  border: 1px solid #199ed8;
  ul li {
    float: left;
    width: 15px;
    height: 15px;
    padding: 0 !important;
    margin: 1px 1px 1px 1px;
  }
}
.list {
  overflow-y: scroll;

  ::-webkit-scrollbar {
    display: none;
  }

  /deep/ .el-loading-spinner {
    margin-top: 20px;
  }

  .gray {
    color: #999;
  }
  .padt10 {
    padding-top: 10px;
  }
  ul li {
    padding: 3px 10px;
    overflow: hidden;
    border-bottom: 1px solid #efefef;
    cursor: pointer;
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    :hover {
      background: #efefef;
    }
    img {
      width: 100%;
      height: 100%;
      float: left;
    }
  }
}
</style>
